<template>
  <div>
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="16">-->
    <!--        <el-row :gutter="20" class="mgb20">-->
    <!--          <el-col :span="8">-->
    <!--            <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
    <!--              <div class="grid-content grid-con-1">-->
    <!--                <i class="el-icon-user-solid grid-con-icon"></i>-->
    <!--                <div class="grid-cont-right">-->
    <!--                  <div class="grid-num">1234</div>-->
    <!--                  <div>用户访问量</div>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </el-card>-->
    <!--          </el-col>-->
    <!--          <el-col :span="8">-->
    <!--            <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
    <!--              <div class="grid-content grid-con-2">-->
    <!--                <i class="el-icon-message-solid grid-con-icon"></i>-->
    <!--                <div class="grid-cont-right">-->
    <!--                  <div class="grid-num">321</div>-->
    <!--                  <div>系统消息</div>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </el-card>-->
    <!--          </el-col>-->
    <!--          <el-col :span="8">-->
    <!--            <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
    <!--              <div class="grid-content grid-con-3">-->
    <!--                <i class="el-icon-s-goods grid-con-icon"></i>-->
    <!--                <div class="grid-cont-right">-->
    <!--                  <div class="grid-num">5000</div>-->
    <!--                  <div>数量</div>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </el-card>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-row :gutter="20">
      <el-col :span="12">

      <el-card shadow="hover">
           <el-select
              v-model="query.collegeId"
              filterable
              placeholder="请选择学院"
              @focus="getAllCollege()"
            >
              <el-option
                  v-for="item in options"
                  :key="item.sid"
                  :label="item.collegeName"
                  :value="item.sid"
                  :disabled="item.collegeName!=='全学院'? false:true"
              >
              </el-option>
            </el-select>
           <el-select
              v-model="query.majorId"
              filterable
              placeholder="请选择专业"
              @focus="getMajor()"
            >
              <el-option
                v-for="item in optionsMajors"
                :key="item.sid"
                :label="item.majorName"
                :value="item.sid"
              >
              </el-option>
            </el-select>
             <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >查看</el-button
            >
          <v-chart
            id="pie"
            class="pie_chart"
            autoresize
            :option="optionPie"
            ref="mapPie"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <v-chart
            id="map"
            class="map_chart"
            autoresize
            :option="option"
            ref="map"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { use, registerMap } from "echarts/core";
import { MapChart } from "echarts/charts";
import { ref, reactive } from "vue";
import china from "@/assets/mapJson/china.json";
import request from "../../utils/request";

registerMap("china", china);
use([MapChart]);

export default {
  name: "ClassStat",
  setup() {
    const optionPie = ref({});
    const option = ref({});
    const query = reactive({
      collegeId: "",
      majorId: "",
    });
    const getMapData = () => {
      optionPie.value = {}
      request.get("/student/statProvince", {
        params: query,
      })
          .then((res) => {
                option.value = {
                  backgroundColor: "transparent",
                  title: {
                    text: "新生地域分布地图",
                  },
                  tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              const value = params.value ? params.value : 0;
              return params.name + ": " + value;
            },
          },
          visualMap: {
            left: "right",
            min: 0,
            max: 100,
            inRange: {
              color: [
                "#313695",
                "#4575b4",
                "#74add1",
                "#abd9e9",
                "#e0f3f8",
                "#ffffbf",
                "#fee090",
                "#fdae61",
                "#f46d43",
                "#d73027",
                "#a50026",
              ],
            },
            text: ["High", "Low"],
            calculable: true,
          },
          series: [
            {
              name: "地图",
              type: "map",
              map: "china",
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: res.data,
            },
          ],
        };
        optionPie.value = {
          legend: {
            type: "scroll",
            orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
            data: res.data,
          },
          tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              const value = params.value ? params.value : 0;
              return params.name + ": " + value;
            },
          },
          series: [
            {
              name: "省份",
              type: "pie",
              radius: "55%",
              center: ["40%", "50%"],
              data: res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
      },
      query.collegeId=null,
      query.majorId=null);
    };

    getMapData();
        //学院下拉框
    const options = ref([]);
    const getAllCollege = () => {
      console.log(query.collegeId);
      request.get("/college/getAllCollege").then((res) => {
        options.value = res.data;
        getMajor;
      });
    };
    //专业下拉框

    const optionsMajors = ref([]);
    const getMajor = () => {
      request
        .get("/major/queryList", {
          params: { collegeId: query.collegeId, type: 1 },
        })
        .then((res) => {
          optionsMajors.value = res.data;
        });
    };
        // 查询操作
    const handleSearch = () => {

      getMapData();
    };

    return {
      option,
      optionPie,
      getMapData,
      query,
      optionsMajors,
      getMajor,
      options,
      getAllCollege,
      handleSearch
    };
  },
};
</script>

<style scoped>
.pie_chart {
  height: 600px;
}
.map_chart {
  height: 600px;
}

.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.mgb20 {
  margin-bottom: 20px;
}
</style>
